<template>
  <view class="container">
    <div style="padding: 20rpx; margin-top: 10rpx">
      <view style="padding: 30rpx; background-color: #ffffff">
        <div class="title_title">设备信息</div>

        <div class="flex">
          <div class="text" style="color: #b4b4b4">设备名称</div>
          <div>{{ info.equipment_info.name }}</div>
        </div>

        <div class="flex">
          <div class="text" style="color: #b4b4b4">设备编号</div>
          <div>{{ info.equipment_info.device_no }}</div>
        </div>
        <div class="flex">
          <div class="text" style="color: #b4b4b4">当前状态</div>
          <div>开锁</div>
        </div>
        <div class="flex">
          <div class="text" style="color: #b4b4b4">是否故障</div>
          <div>否</div>
        </div>

        <div class="flex">
          <div class="text" style="color: #b4b4b4">机构</div>
          <div>{{ info.hospital_info.name }}</div>
        </div>

        <!-- <div class="flex">
          <div class="text" style="color: #b4b4b4">科室</div>
          <div>{{ info.storage_info.department_name }}</div>
        </div>

        <div class="flex">
          <div class="text" style="color: #b4b4b4">楼层</div>
          <div>{{ info.storage_info.floor }}楼</div>
        </div> -->
      </view>

      <view style="margin-top: 30rpx; padding: 30rpx; background-color: #ffffff" @click="goToDetail">
        <div class="title_title">{{ info.order_info.status_text }}</div>

        <!-- <div class="flex">
          <div class="text">儿科病房医疗综合楼9楼</div>
          <div>按时</div>
        </div> -->

        <div class="flex">
          <div class="text" style="color: #b4b4b4">订单号</div>
          <div>{{ info.order_info.sn }}</div>
        </div>

        <div class="flex">
          <div class="text" style="color: #b4b4b4">用户名称</div>
          <div>{{ info.user_info.display_name }}</div>
        </div>
        <div class="flex">
          <div class="text" style="color: #b4b4b4">用户电话</div>
          <div>{{ info.user_info.mobile }}</div>
        </div>
        <!-- <div class="flex">
          <div class="text" style="color: #b4b4b4">设备编号</div>
          <div>{{ info.equipment_info.code }}</div>
        </div> -->

        <div class="flex">
          <div class="text" style="color: #b4b4b4">开始时间</div>
          <div>{{ info.order_info.createtime_text }}</div>
        </div>

        <div class="flex">
          <div class="text" style="color: #b4b4b4">到期时间</div>
          <div>{{ info.order_info.return_time_text }}</div>
        </div>

        <div class="flex">
          <div class="text" style="color: #b4b4b4">订单金额</div>
          <div>
            {{ info.order_info.money }}
            元
          </div>
        </div>

        <div class="flex">
          <div class="text" style="color: #b4b4b4">押金</div>
          <div>{{ info.order_info.deposit_text }} 元</div>
        </div>

        <div class="flex" v-if="info.order_info.status == 3">
          <div class="text" style="color: #b4b4b4">押金</div>
          <div>{{ info.order_info.rent_money }} 元</div>
        </div>

      </view>

      <div style="margin-top: 20rpx" v-if="isTimeout && !isRefund">
        <u-button type="primary" @click="endOrderApi">结束订单</u-button>
      </div>

      <div style="margin-top: 20rpx" v-if="isRefund">
        <u-button type="primary" @click="refund">指定金额退款</u-button>
      </div>
    </div>

    <u-modal v-model="show" title="指定金额退款" @confirm="confirm">
      <view class="pops-content" style="padding: 20rpx">
        <div style="margin-bottom: 20rpx">
          最大退款金额：{{ info.order_info.rent_money }}
        </div>
        <input class="uni-input" type="digit" v-model="money" placeholder="请输入退款金额" />
      </view>
    </u-modal>
  </view>
</template>

<script>
import navbarMixin from "@/common/mixin/navbar.js";
import { getOrderDetailNew, endOrder, partRefund } from "@/api/index.js";
export default {
  mixins: [navbarMixin],

  data() {
    return {
      active: 0,
      info: {},
      // 是否已超时
      isTimeout: false,
      // 是否退款详情
      isRefund: false,
      show: false,
      // 金额
      money: undefined,
    };
  },

  /**
   * 生命周期函数--监听页面加载
   */
  async onLoad(options) {
    this.getInfo(options)
  },

  methods: {

    async getInfo(options) {
      const _info = await getOrderDetailNew({
        order_sn: options.sn,
      });

      this.isRefund = options.type == "refund";

      this.info = _info;

      // _info.order_info.answer_return_time < Date.now()
      // 获取当前时间戳，秒级
      const timestamp = Math.floor(Date.now() / 1000);

      // 如果超时
      if (_info.order_info.answer_return_time < timestamp) {
        this.isTimeout = true;
      }

      if (_info.order_info.status == 1) {
        this.isTimeout = true;
      }

      console.log("_info", _info);
    },
    click(item) {
      console.log("item", item);
    },

    /**
     * 返回上一页
     */
    goBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    async endOrderApi() {
      try {
        uni.showModal({
          title: "提示",
          content: "确定结束订单吗？",
          success: async (res) => {
            if (res.confirm) {
              await endOrder({
                order_id: this.info.order_info.id,
              });

              uni.showToast({
                title: "结束成功",
                icon: "success",
              });

              // 跳到pages/adminPage/orderStatus/index
              // uni.switchTab({
              //   url: "/pages/adminPage/orderStatus/index",
              // });
              // 返回上一页
              uni.navigateBack({
                delta: 1,
              });
            }
          },
        });
      } catch (error) {
        console.log("error", error);
      }
    },
    async refund() {
      if (this.info.order_info.rent_money < this.money) {
        return uni.showToast({
          title: `退款金额不能超过${this.info.order_info.rent_money}元`,
          icon: "none",
        });
      }
      // uni.showModal({
      //   title: "提示",
      //   content: "是否确定退款",
      //   success: async (res) => {
      //     if (res.confirm) {
      //     }
      //   },
      // });
      this.show = true;
    },
    async confirm() {
      uni.showModal({
        title: "提示",
        content: "是否确定退款",
        success: async (res) => {
          if (res.confirm) {
            try {
              const _result = await partRefund({
                id: this.info.order_info.id,
                refund_amount: this.money,
              });
              console.log("_result", _result);
             // this.order_info = _result.data;
                this.show = false;
                // this.show_return = true;
                uni.showToast({
                  title: "已提交退款申请，耐心等待"
                })
                // 返回上一页
                uni.navigateBack();
            } catch (error) {
              console.log("error", error);
              uni.showToast({ title: error.msg, icon: "none", });
            }
          }
        },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background: #ebebeb;
}

.login_title {
  width: 33%;
  display: flex;
  justify-content: center;
  padding-top: 28rpx;
  padding-bottom: 28rpx;

  color: rgba(251, 251, 251, 1);
  font-size: 36rpx;
  text-align: left;
  font-family: PingFangSC-regular;
  align-items: center;
}

.login_title_active {
  width: 216rpx;
  height: 66rpx;
  line-height: 46rpx;
  border-radius: 34rpx;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(101, 175, 80, 1);
  font-size: 32rpx;
  text-align: center;
  font-family: PingFangSC-bold;
}

.title_title {
  color: black;
  font-size: 40rpx;
  text-align: left;
  font-family: SourceHanSansSC-regular;
  font-weight: 600;
}

.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 26rpx;
}

.text {
  height: 46rpx;
  line-height: 46rpx;
  color: rgba(0, 0, 0, 1);
  font-size: 32rpx;
  text-align: left;
  font-family: SourceHanSansSC-regular;
}
</style>
